/*
  学习目标：useState的基本使用
*/

// 1. 导入useState钩子函数
import { useState } from 'react';

export default function App() {
  // 2. 调用useState, 解构数据变量/ 更新变量的函数
  const [count, setCount] = useState(99);
  const [msg, setMsg] = useState('hello React');
  console.log('count, setCount  ----->  ', count, setCount);

  return (
    <div>
      <h1>
        {/* // 3. 插值使用 */}
        数量: {count} - {msg}
      </h1>
      <button
        onClick={() => {
          // 4. 绑定事件 ,调用更新变量的函数
          setCount(count + 1); //等价于 this.setState({count: count + 1})
        }}
      >
        点我+ 1
      </button>
      <button
        onClick={() => {
          setMsg(msg + '~');
        }}
      >
        点我+~
      </button>
    </div>
  );
}
